<template>
  <body>
  <div>
    <img src="../assets/bg.jpg">
    <h1 class="title21">欢迎加入小趴菜</h1>
    <div>
      <form>
        <div class="class21">姓名&nbsp; : &nbsp;<input id=name @blur="checkName()" type="text" class="text1"
                                                       v-model="registeredForm.name">
          <span id="s_user" class="error"></span>
          <div class="tishi">3-20位,无特殊字符,必须有字母</div>
        </div>
        <div class="class22">账号&nbsp; : &nbsp;<input id=id type="text" @blur="checkAccount" class="text1"
                                                       v-model="registeredForm.account">
          <span id="i_user" class="error"></span>
        </div>
        <div class="class23">电话&nbsp; : &nbsp;<input id=id type="text" @blur="checkTele" class="text1"
                                                       v-model="registeredForm.tele">
          <span id="i_tele" class="error"></span>
        </div>
        <div class="class24">默认地址&nbsp; : &nbsp;<input id=id type="text" class="text1"
                                                           v-model="registeredForm.defaultTradePlace">
          <div class="tishi">密码不少于六位，含数字字母</div>
        </div>
        <div class="class25">密码 &nbsp;: &nbsp;<input id=pwd type="password" @blur="checkpwd" class="text1"
                                                       v-model="registeredForm.password">
          <span id="p_user" class="error"></span>
        </div>
        <div class="class26">确认密码 &nbsp;: &nbsp;<input id=repwd type="password" @blur="confirmpwd" class="text21">
          <span id="r_user" class="error"></span>
        </div>
      </form>
      <div>
        <button type="button" class="class27" @click="registered">确认</button>
      </div>
    </div>
  </div>
  </body>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "UserRegiest",
  data() {
    return {
      registeredForm: {
        name: '',
        account: '',
        tele: '',
        defaultTradePlace: '',
        password: ''
      },
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      flag5: false,
    }
  },
  methods: {
    registered() {
      if (this.flag1 != false && this.flag2 != false && this.flag3 != false && this.flag4 != false && this.flag5 != false) {
        request.post("http://localhost:8087/user/register", this.registeredForm).then(res => {
          if (res.flag) {
            router.push({path: '/front/login'});
            this.$message({
              type: 'success',
              message: res.msg
            })
          } else {
            this.$message.error(res.msg)
            this.account = ''
            this.password = ''
          }
        })
      }
    },
    checkName() {
      let name = this.registeredForm.name
      let s_user = document.getElementById("s_user")
      let reg_name = /[\u4E00-\u9FA5]{2,5}$/;
      let flag = reg_name.test(name);
      if (flag) {
        s_user.innerHTML = "格式正确";
        this.flag1 = true;
      } else {
        s_user.innerHTML = "用户名格式有误！";
        this.flag1 = false;
      }
      return flag;
    },
    checkAccount() {
      let id = this.registeredForm.account
      let i_user = document.getElementById("i_user");
      if ((id.length <= 20 && id.length >= 3) && id.match(/[a-zA-Z]/) && !id.match(/[^a-zA-Z0-9]/)) {
        i_user.innerHTML = "格式正确";
        this.flag2 = true;
        return true;
      } else {
        i_user.innerHTML = "账号格式有误！";
        this.flag2 = false;
        return false;
      }
    },
    checkTele() {
      let tele = this.registeredForm.tele
      let i_tele = document.getElementById("i_tele");
      if (tele.match(/^1[3-9]\d{9}$/)) {
        i_tele.innerHTML = "格式正确";
        this.flag3 = true;
        return true;
      } else {
        i_tele.innerHTML = "电话号码有误，请重新填写！";
        this.flag3 = false;
        return false;
      }
    },
    checkpwd() {
      let pwd = this.registeredForm.password
      let p_user = document.getElementById("p_user");
      let reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
      let flag = reg_pwd.test(pwd);
      if (flag) {
        p_user.innerHTML = "格式正确";
        this.flag4 = true;
      } else {
        p_user.innerHTML = "密码格式有误！";
        this.flag4 = false;
      }
      return flag;
    },
    confirmpwd() {
      let pwd = this.registeredForm.password
      let repwd = document.getElementById("repwd").value;
      let r_user = document.getElementById("r_user");
      if (pwd != repwd) {
        r_user.innerHTML = "两次密码不一致";
        this.flag5 = false;
      } else {
        r_user.innerHTML = "";
        this.flag5 = true;
      }
    },
  }
}
</script>

<style>
.title21 {
  position: absolute;
  margin-left: 40%;
  top: 100px;
}

.class21 {
  /* display: inline-flex; */
  position: absolute;
  top: 200px;
  margin-left: 35%;
  text-align: center;
  font-family: fantasy;
}

.class22 {
  /* display: inline-flex; */
  position: absolute;
  top: 245px;
  margin-left: 35%;
  text-align: center;
  font-family: fantasy;
}

.class23 {
  /* display: inline-flex; */
  position: absolute;
  top: 290px;
  margin-left: 35%;
  text-align: center;
  font-family: fantasy;
}

.class24 {
  /* display: inline-flex; */
  position: absolute;
  top: 335px;
  margin-left: 33%;
  text-align: center;
  font-family: fantasy;
}

.class25 {
  /* display: inline-flex; */
  position: absolute;
  top: 380px;
  margin-left: 35%;
  text-align: center;
  font-family: fantasy;
}

.class26 {
  /* display: inline-flex; */
  position: absolute;
  top: 425px;
  margin-left: 33%;
  text-align: center;
  font-family: fantasy;
}

.class27 {
  position: absolute;
  margin-left: 39%;
  top: 470px;
  width: 260px;
  height: 35px;
  background-image: url(../assets/button-bg.jpg);
  border-radius: 5px;
  font-size: 20px;
}

.text21 {
  height: 25px;
  width: 300px;
}

.tishi {
  float: bottom;
  color: rgb(163, 156, 146);
  font-size: 12px;
  align-self: center;
}
</style>
